<template>
    <div class="remark">
        <!-- 顶部内容 -->
        <div class="remark_user">
            <!-- 左边头像 -->
            <div class="user_message f_left">
                <div class="user_icon">
                    <img src="../assets/img/boji.jpg" alt="boji">
                </div>
                <div class="user_titles">
                    <span>波吉</span>
                    <span>2021年12月23日</span>
                </div>
            </div>
            <!-- 右边删除 -->
            <div class="user_detete f_right" @click="sendFn">
                <span class="iconfont icon-shanchu1"></span>
            </div>
        </div>
        <!-- 输入框 -->
        <div class="remark_text">
            <textarea placeholder="写点什么吧..."
            v-model="talk"
            ></textarea>
            <button @click="sendTalk">发送</button>
        </div>
    </div>
</template>

<script>
export default {
     data(){
         return{
           talk : "",
         }
     },
     methods:{
         sendTalk(){
            // console.log(this.talk);
            // this.$emit('pcle',this.talk);
            // localStorage.setItem('msg',this.talk);
            this.$router.push({path:'/article',name:'article',params:{talk : this.talk}});
            // 清空
            // this.talk = "";
         },
         sendFn(){
            //返回上一级
            this.$router.go(-1);
            // this.$router.replace('/article');
         }
     }
     
}
</script>

<style lang="scss" scoped>
@import "../assets/css/reset.css";
@import "../assets/common/variable.scss";

 .remark{
    width: 100%;
    height: 666px;
    position: relative;
    &::after{
        content: '';
        width: 100%;
        height: 100%;
        display: block;
        filter: blur(1px);
        z-index: -1;
        background: url('https://images.unsplash.com/photo-1640194187638-5b6a260882f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0OHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60');
        background-size: 100% 100%;
        background-repeat:no-repeat ;
        position: absolute;
        top: 0;
        left: 0;
    }
  .remark_user{
    width: 100%;
    height: 60px;
    z-index: 99;
    // 头像
      .user_message{
        height: 60px;
        position: relative;
        .user_icon{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            margin-left: 15px;
            margin-top: 5px;
            background: palevioletred;
            img{
                width: 50px;
                height: 50px;
                border-radius: 50%;
                display: block;
            }
        }
        .user_titles{
            margin-left: 80px;
            padding-top: 10px;
            span{
              display: block;
              &:first-child{
                  font-size: 18px;
                  font-weight: bold;
              }
              &:last-child{
                  font-size: 16px;
                  color: #808080;
              }
            }
        }
      }
    //右边删除
    .user_detete{
        width: 38px;
        height: 38px;
        line-height: 35px;
        text-align: center;
        border-radius: 50%;
        margin-right: 15px;
        margin-top: 10px;
        background: rgba(255,255,255,0.5);
        span{
            font-size: 20px;
        }
    }
  }
  .remark_text{
      width: 100%;
      position: relative;
      margin-top: 20px;
      z-index: 99;
      textarea{
          position: absolute;
          width: 320px;
          height: 300px;
          outline: none;
          border: none;
          padding-left: 20px;
          padding-right: -20px;
          padding-top: 10px;
          margin-left: 18px;
          font-size: 20px;
          border-radius: 10px;
      }
      button{
          position: absolute;
          margin-top: 270px;
          margin-left: 290px;
          border: none;
          padding: 5px 15px;
          border-radius: 20px;
          color: #fff;
          background: #ffa631;
      }
  }
}
</style>